<mk-drawer-form
    v-model="drawer"
    :loading="drawerLoading"
    :title="typeof drawerData.id === 'undefined' ? '添加' : '编辑'"
    @save="saveDrawer()">
    <el-form
        :model="drawerData" 
        ref="drawerData" 
        :rules="drawerRules" 
        label-width="70px">
        <el-form-item label="名称：" prop="title">
            <el-input v-model="drawerData.title" placeholder="请输入组别名称" maxlength="100" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="父级：" prop="pid">
            <el-select v-model="drawerData.pid" filterable placeholder="输入文字可搜索父级">
                <el-option
                    v-for="(item, index) in tableTreeString"
                    :key="index"
                    :label="item.title"
                    :value="item.id">
                    <span v-html="item.treeString" class="mk-tree-name"></span>
                    {{ item.title }}
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
            <el-switch
                v-model="drawerData.status"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="0">
            </el-switch>
        </el-form-item>
        <el-form-item label="权限：">
            <el-checkbox 
                @change="drawerTreeCheckedAll" 
                v-model="drawerTreeChecked"
                label="全部选中" 
                size="mini" 
                border>
            </el-checkbox>
            <el-checkbox 
                @change="drawerTreeExpandAll"
                v-model="drawerTreeExpand"
                label="全部展开" 
                size="mini" 
                border>
            </el-checkbox>
            <el-tree
                ref="tree"
                :data="drawerMenuTree"
                :render-content="drawerTreeContent"
                node-key="id"
                :props="drawerProps"
                :expand-on-click-node="false"
                show-checkbox
                check-on-click-node>
            </el-tree>
        </el-form-item>
    </el-form>
</mk-drawer-form>